<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>多ajax结束后提示加载完成</title>
</head>
<body>
<div id="mask">
    正在加载中!
</div>
<script type="text/javascript" src="//cdnjscn.b0.upaiyun.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        /*  方法1：弹出遮罩
         执行的方法2(在每个AJAX的.ajaxComplete()里numAjax--,同时判断numAjax；if(numAjax==0){遮罩.style.display='none'})

         执行的方法3在每个AJAX的.ajaxComplete()里numAjax--,同时判断numAjax；if(numAjax==0){遮罩.style.display='none'}

         执行的方法4在每个AJAX的.ajaxComplete()里numAjax--,同时判断numAjax；if(numAjax==0){遮罩.style.display='none'}*/

        var numAjax = 0;
        //jquery 1.8后 ajaxComplete只能绑定在document上
        $(document).ajaxComplete(function () {
            console.log("ajax complete!Date:" + new Date().getMilliseconds() + ";numAjax:" + numAjax);
            numAjax--;
            $("#mask").text("numAjax:" + numAjax);
            if (numAjax == 0) {
                $("#mask").text("加载完成!");
            }
        });


        function ajax() {
            numAjax++;
            console.log("before ajax-" + numAjax);
            setTimeout(function () {
                $.ajax({
                    type: "post",
                    url: "data.json",
                    data: {},
                    dataType: "json",
                    success: function (ret) {
                        console.log("ajax success!Date:" + new Date().getMilliseconds() + ";numAjax:" + numAjax);
                    }
                });
            }, numAjax * 5000);

        }

        ajax();
        ajax();
        ajax();

    });
</script>
</body>
</html>